<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
        增删元素
            //创建一个新的元素
            var csli=document.createElement("li")  //<li></li>
            //设置子元素的属性和文本 <li id="cs">长沙</li>
            csli.id="cs"
            csli.innerText="长沙"
            //将子元素放入父元素中
            var city1=document.getElementById("city")
            //在父元素中追加子元素
            city1.appendChild(csli)
            city1.insertBefore(csli,sz)//(新元素，参照元素) 在参照元素前添加新元素
            cityul.replaceChild(新元素，被替换的元素) 用新的元素替换某个子元素
            元素.remove()删除当前元素
        */
       function addCs(){
        //创建一个新的元素
        var csli=document.createElement("li")  //<li></li>
        //设置子元素的属性和文本 <li id="cs">长沙</li>
        csli.id="cs"
        csli.innerText="长沙"
        //将子元素放入父元素中
        var city1=document.getElementById("city")
        //在父元素中追加子元素
        city1.appendChild(csli)
       }
       function addCsBeforeCz(){
        //创建一个新的元素
        var csli=document.createElement("li")  //<li></li>
        var sz=document.getElementById("sz")  //获取参照元素
        //设置子元素的属性和文本 <li id="cs">长沙</li>
        csli.id="cs"
        csli.innerText="长沙"
        //将子元素放入父元素中
        var city1=document.getElementById("city")
        //在父元素中追加子元素
        city1.insertBefore(csli,sz)//(新元素，参照元素)
       }
       function replaceSz(){
        //创建一个新的元素
        var csli=document.createElement("li")  //<li></li>
        var sz=document.getElementById("sz")  //获取参照元素
        //设置子元素的属性和文本 <li id="cs">长沙</li>
        csli.id="cs"
        csli.innerText="长沙"
        //将子元素放入父元素中
        var city1=document.getElementById("city")
        //在父元素中追加子元素
        //cityul.replaceChild(新元素，被替换的元素)
        city1.replaceChild(csli,sz)
       }
       function deleteSz(){
        var szli=document.getElementById("sz")
        //哪个元素调用了remove该元素就会从dom树中移除
        szli.remove()
       }
       function deleteAll(){
        var city1=document.getElementById("city")
        // var fc=city1.firstChild  方法一
        // while(fc!=null){
        //     fc.remove()
        //     fc=city1.firstChild
        // }

        //如果直接city1.remove（）则是直接干掉ul列表，后续无法添加元素
        city1.innerHTML=""
       }
    </script>
</head>
<body>
    <ul id="city">
        <li id="bj">北京</li>
        <li id="sh">上海</li>
        <li id="sz">深圳</li>
        <li id="gz">广州</li>
    </ul>
    <hr>
    <!-- 目标1 在城市列表的最后添加一个子标签 -->
    <button onclick="addCs()">增加长沙</button>
    <!-- 目标2 在城市列表的深圳前增加一个子标签 -->
    <button onclick="addCsBeforeCz()">在深圳前插入长沙</button>
    <!-- 目标3 用长沙替换深圳 -->
    <button onclick="replaceSz()">长沙替换深圳</button>
    <!-- 目标4 删除深圳 -->
    <button onclick="deleteSz()">删除深圳</button>
    <!-- 目标5 清空城市列表 -->
     <button onclick="deleteAll()">清空</button>
</body>
</html>